import React, {useState} from 'react';
import {Breadcrumb, Button, Form, Input, Modal, Table} from "antd";
import Divider from "antd/es/divider";
import {Layout, Tree} from 'antd';
import Toolbar from "../../components/toolbar";

const {Sider, Content} = Layout;

function DashBoardRole(props) {

    const columns = [
        {
            title: '看板名称',
            dataIndex: 'name',
        },
        {
            title: '操作',//删除编辑操作
            key: 'action',
            render: (key) => (
                <span>
                    <a onClick={() => {
                        compile(key)
                    }}>编辑</a>
                    <Divider type="vertical"/>
                    <a onClick={() => {
                        del(key)
                    }}>删除</a>
                </span>
            ),
        },
    ];
    const del = (key) => {//删除方法
        console.log(key)
    }
    const compile = (key) => {//编辑
        console.log(key)
    }

    const data = [];
    for (let i = 0; i < 5; i++) {
        data.push({
            key: i,
            name: `看板` + i,
            ip: `192.168.15.8`,
        });
    }


    //----- 弹框
    const [visible, setVisible] = useState(false);

    const treeEventData = [
        {
            title: '报警种类',
            key: '0-0',
            children: [
                {
                    title: '呼叫主管',
                    key: '0-0-0',
                },
                {
                    title: '品质异常',
                    key: '0-0-1',
                }, {
                    title: '设备异常',
                    key: '0-0-2',
                }, {
                    title: '品质缺料',
                    key: '0-0-3',
                },
            ],
        }
    ];
    const treeButtonData = [
        {
            title: '车间1',
            key: '0-0',
            children: [
                {
                    title: '产线1',
                    key: '0-0-0',
                    children: [
                        {
                            title: '按钮盒1',
                            key: '0-0-0-0',
                        }, {
                            title: '刷卡1',
                            key: '0-0-0-1',
                        },
                    ]
                },
                {
                    title: '产线2',
                    key: '0-0-1',
                    children: [
                        {
                            title: '按钮盒2',
                            key: '0-0-1-0',
                        },
                    ]
                },
            ],
        },
        {
            title: '车间2',
            key: '0-1',
            children: [
                {
                    title: '产线3',
                    key: '0-1-0',
                    children: [
                        {
                            title: '按钮盒3',
                            key: '0-1-0-0',
                        }, {
                            title: '刷卡2',
                            key: '0-1-0-1',
                        },
                    ]
                },
                {
                    title: '产线4',
                    key: '0-1-1',
                    children: [
                        {
                            title: '按钮盒4',
                            key: '0-1-1-0',
                        },
                    ]
                },
            ],
        },
    ];
    const onSelect = (selectedKeys: React.Key[], info: any) => {
        console.log('selected', selectedKeys, info);
    };

    const onCheck = (checkedKeys: React.Key[], info: any) => {
        console.log('onCheck', checkedKeys, info);
    };
    return (
        <div className="DashBoardRole">

            <Breadcrumb>
                <Breadcrumb.Item>设备管理</Breadcrumb.Item>
                <Breadcrumb.Item>看板设置</Breadcrumb.Item>
            </Breadcrumb>
            <div className="site-layout-background" style={{padding: 24, minHeight: 360}}>
            <Toolbar>
                <Button type="primary"
                        onClick={() => {
                            setVisible(true);
                        }}>新增
                </Button>
            </Toolbar>
            <Layout style={{background: "#fff"}}>

                <Table theme="light" columns={columns} dataSource={data} pagination={false}/>

                <Sider theme="light">
                    <Tree
                        checkable
                        onSelect={onSelect}
                        onCheck={onCheck}
                        treeData={treeEventData}
                    />
                </Sider>
                <Sider theme="light">
                    <Tree
                        checkable
                        onSelect={onSelect}
                        onCheck={onCheck}
                        treeData={treeButtonData}
                    />
                </Sider>

            </Layout>

            <Modal
                visible={visible}
                title="添加车间"
                onCancel={() => {
                    setVisible(false)
                }}
                onOk={() => {
                    setVisible(false)
                }}
            >
                <Form
                >
                    <Form.Item
                        style={{color: "black"}}
                        label="小组名字">
                        <Input/>
                    </Form.Item>
                    cpdd
                    <Tree
                        checkable
                        onSelect={onSelect}
                        onCheck={onCheck}
                        treeData={treeEventData}
                    />
                    <Tree
                        checkable
                        onSelect={onSelect}
                        onCheck={onCheck}
                        treeData={treeButtonData}
                    />


                </Form>
            </Modal>
        </div>
        </div>
    );
}

export default DashBoardRole;